import styled from 'styled-components';
import React, { FC, useState } from 'react';
import { message } from 'antd';
import { httpPost } from '@utils/HttpUtil';
import { useNavigate } from 'react-router-dom';
import { setCookie } from '@utils/StorageUtil';

const LoginButton: FC = () => {

  const navigate = useNavigate();

  // 定义状态管理输入值
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  // 输入框变化时的处理逻辑
  const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setUsername(e.target.value);
  };
  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setPassword(e.target.value);
  };

  // 表单提交逻辑
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    var data = httpPost("/user/login", {
      loginName: username,
      password: password,
    });
    if (data.code === 500) {
      message.error(data.msg+'');
    }else{
      var token = data.data;
      message.success("登录成功");
      setCookie('token', token);
      navigate('/study');
    }
  }

  return (
    <StyledWrapper>
      <form className="form" onSubmit={handleSubmit}>
        <p className="form-title">格题书院</p>
        <div className="input-container">
          <input
            type="text"
            placeholder="输入账号/手机号"
            value={username}
            onChange={handleUsernameChange}
          />
          <span></span>
        </div>
        <div className="input-container">
          <input
            type="password"
            placeholder="输入密码"
            value={password}
            onChange={handlePasswordChange}
          />
        </div>
        <button type="submit" className="submit">
          登录
        </button>
        <p className="signup-link">
          <a href="xx">没有账号? 点击此处注册</a>
        </p>
      </form>
    </StyledWrapper>
    
  );
}

const StyledWrapper = styled.div`
  .form {
    background-color: #fff;
    display: block;
    padding: 1rem;
    max-width: 350px;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }

  .form-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
    text-align: center;
    color: #000;
  }

  .input-container {
    position: relative;
  }

  .input-container input, .form button {
    outline: none;
    border: 1px solid #e5e7eb;
    margin: 8px 0;
  }

  .input-container input {
    background-color: #fff;
    padding: 1rem;
    padding-right: 3rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    width: 300px;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  }

  .input-container span {
    display: grid;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    padding-left: 1rem;
    padding-right: 1rem;
    place-content: center;
  }

  .input-container span svg {
    color: #9CA3AF;
    width: 1rem;
    height: 1rem;
  }

  .submit {
    display: block;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    background-color: #4F46E5;
    color: #ffffff;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    width: 100%;
    border-radius: 0.5rem;
    text-transform: uppercase;
  }

  .signup-link {
    color: #6B7280;
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-align: center;
  }

  .signup-link a {
    text-decoration: underline;
  }`;

export default LoginButton;
